<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            ul li{
                margin: 20px 20px;
                padding: 10px 5px;
                border-radius: 3px;
            }
            ul li.active{
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <audio :src="getCurrentSonSrc" autoplay controls></audio>
            <ul>
                <li v-for="(item,index) in musicData" @click="clickHandler(index)" :class="{active:currentIndex === index}">
                    <h2>{{item.id}}-歌名：{{item.name}}</h2>
                    <p>歌手：{{item.songSrc}}</p>
                </li>
            </ul>
        </div>
        <script type="text/javascript" src="./vue.js"></script>
        <script type="text/javascript">
            var musicData = [
                {id:1,name:'hujian-001',author:'hujian',songSrc:'./static/processing.mp3'},
                {id:2,name:'hujian-002',author:'hujian',songSrc:'./static/transfer.mp3'},
                {id:3,name:'hujian-003',author:'hujian',songSrc:'./static/verified.mp3'},
                {id:4,name:'hujian-004',author:'hujian',songSrc:'./static/warning.mp3'}
            ]

            new Vue({
                el:'#app',
                data(){
                    return{
                        musicData,
                        currentIndex:0
                    }
                },
                computed:{
                    // 计算属性默认只有getter
                    // setter也可以
                    getCurrentSonSrc:{
                        set:function (newV) {
                            console.log(newV);
                            this.currentIndex=newV;
                        },
                        get:function () {
                            return this.musicData[this.currentIndex].songSrc
                        }
                    }
                },
                methods:{
                    clickHandler(index){
                        //直接修改的数据属性
                        //this.currentIndex = index;
                        console.log(this.getCurrentSonSrc);
                        this.getCurrentSonSrc=index;
                    }
                }
            })

        </script>
    </body>
</html>